<template>
    <el-dialog
        title="开户"
        :visible.sync="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="700px"
    >
        <div v-if="reset">
            <el-form :model="formData" :rules="rules" ref="form">
                <el-form-item label="账户状态：" label-width="140px">
                    <el-tag type="info">未开户</el-tag>
                </el-form-item>
                <el-form-item label="账号：" prop="loginName" label-width="140px">
                    <el-input
                        v-model="formData.loginName"
                        auto-complete="off"
                        placeholder="请输入登录账号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="账号有效期：" prop="expireType" label-width="140px">
                    <el-radio-group v-model="formData.expireType" @change="onExpireTypeChange">
                        <el-radio :label="1">永久</el-radio>
                        <el-radio :label="2">限时</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label prop="expireDuration" label-width="140px">
                    <el-radio-group
                        v-model="formData.expireDuration"
                        :disabled="formData.expireType===1"
                        @change="onExpireDurationChange"
                    >
                        <el-radio :label="1">一个月</el-radio>
                        <el-radio :label="2">两个月</el-radio>
                        <el-radio :label="3">三个月</el-radio>
                        <el-radio :label="4">六个月</el-radio>
                        <el-radio :label="5">一年</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="有效时间段：" prop="effectTime" label-width="140px">
                    <el-date-picker
                        v-model="formData.effectTime"
                        type="datetime"
                        placeholder="选择生效时间"
                        align="right"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                    <span style="margin-left:20px;margin-right:20px;">-</span>
                    <el-date-picker
                        v-model="formData.expireTime"
                        type="datetime"
                        placeholder="选择过期时间"
                        align="right"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="添加允许登录IP：" prop="allowIp" label-width="140px">
                    <el-input
                        v-model="formData.allowIp"
                        type="textarea"
                        auto-complete="off"
                        placeholder="多条数据用英文逗号,分隔"
                    ></el-input>
                </el-form-item>
                <el-form-item label="短信通知" label-width="140px">
                    <el-switch v-model="formData.smsOn"></el-switch>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import dept_api from '../../api/dept_api'
import user_api from '../../api/user_api'
export default {
    props: {
        show: Boolean,
        success: Function,
        cancel: Function,
        id: Number,
    },
    created() {
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init && this.init()
                })
            }
        }
    },
    data() {
        return {
            formData: {
                effectTime: '',
                expireTime: '',
                expireType: 2,
                expireDuration: 1,
                userId: this.id,
            },
            rules: {
                loginName: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' }
                ],
                expireType: [
                    { required: true, message: '请选择账号有效期', trigger: 'change' }
                ],
                effectTime: [
                    { required: true, message: '请选择生效时间', trigger: 'change' }
                ],
                allowIp: [
                    {
                        type: 'string',
                        max: 250,
                        message: '不要超过250个字符',
                        trigger: 'blur'
                    }
                ]
            },
            loadingSubmit: false,
            reset: true
        }
    },
    methods: {
        init() {
            this.onExpireDurationChange(1)
        },
        handleSubmit(callback) {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loadingSubmit = true
                    user_api.activateUser(this.formData).then(data => {
                        this.loadingSubmit = false
                        this.$message.success('开户成功!')
                        this.success(data)
                    }).catch(err => {
                        this.loadingSubmit = false
                        this.$message.error(err.message)
                    })
                }
            })
        },
        handleCancel() {
            this.cancel()
        },
        onExpireTypeChange(val) {
            this.formData.expireTime = ''
            if (val == 2) {
                this.formData.expireDuration = 1
                this.onExpireDurationChange(1)
            }
        },
        onExpireDurationChange(val) {
            const now = new Date()
            this.formData.effectTime = now.format('yyyy-MM-dd HH:mm:ss')
            switch (val) {
                case 1:
                    now.setMonth(now.getMonth() + 1);
                    this.formData.expireTime = now.format('yyyy-MM-dd HH:mm:ss')
                    break
                case 2:
                    now.setMonth(now.getMonth() + 2);
                    this.formData.expireTime = now.format('yyyy-MM-dd HH:mm:ss')
                    break
                case 3:
                    now.setMonth(now.getMonth() + 3);
                    this.formData.expireTime = now.format('yyyy-MM-dd HH:mm:ss')
                    break
                case 4:
                    now.setMonth(now.getMonth() + 6);
                    this.formData.expireTime = now.format('yyyy-MM-dd HH:mm:ss')
                    break
                case 5:
                    now.setMonth(now.getMonth() + 12);
                    this.formData.expireTime = now.format('yyyy-MM-dd HH:mm:ss')
                    break
            }
        }
    }
}
</script>

<style>
</style>